<template>
  <div class="colDrawer">
    <div
      style="
        margin-bottom: 5px;
        font-weight: 600;
        color: #606266;
        font-size: 15px;
      "
    >
      {{ title }}
    </div>
    <div class="table-main1">
      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="tableData"
        highlight-current-row
        border
      >
        <!-- 表格内容操作 -->
        <template v-for="item in tableColumns" :key="item">
          <TableColumn v-if="item.prop && item.isShow" :column="item">
            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
              <slot :name="slot" v-bind="scope"></slot>
            </template>
          </TableColumn>
        </template>
        <el-table-column fixed="right" label="操作" width="40" align="center">
          <template #default="scope">
            <i-ep-search
              class="cursor-pointer c-blue-5"
              @click="openDetail(scope.row)"
            />
          </template>
        </el-table-column>
        <template #empty>
          <div class="table-empty">
            <!-- <img src="@/assets/images/notData.png" alt="notData" /> -->
            <div>暂无数据</div>
          </div>
        </template>
      </el-table>
    </div>
    <!-- 工单弹窗 -->
    <psmworkorder-edit
      :visible="addDialog4.visible"
      :title="addDialog4.title"
      :data="addDialog4.data"
      :is-readonly="addDialog4.readvisible"
      @change-visible="changeVisible"
      key="1"
    />
    <!-- 测量弹窗 -->
    <qdasDetectionData-edit
      :visible="addDialog5.visible"
      :title="addDialog5.title"
      :data="addDialog5.data"
      :is-readonly="addDialog5.readvisible"
      @change-visible="changeVisible"
    />
    <!-- 故障信息弹窗 -->
    <equfaultinfo-edit
      :visible="addDialog6.visible"
      :title="addDialog6.title"
      :data="addDialog6.data"
      :is-readonly="addDialog6.readvisible"
      @change-visible="changeVisible"
    />
    <!-- 报警信息弹窗 -->
    <scaalarmrecord-edit
      :visible="addDialog3.visible"
      :title="addDialog3.title"
      :data="addDialog3.data"
      :is-readonly="addDialog3.readvisible"
      @change-visible="changeVisible"
    />
  </div>
</template>

<script setup lang="tsx" name="PsmParamMonitorOthers">
import request from "@/utils/request";
import dayjs from "dayjs";
import { useDictionary } from "@/utils/useTable"; // 引入

const props = defineProps<{
  type: String;
  equipCode?: String;
  alarmTime: String;
  recordCount: Number;
  equipId?: String;
  processEquipCode?: String;
  processEquipId?: String;
}>();

function openDetail(item: any) {
  if (props.type == "4") {
    openWorkOrder(item);
  } else if (props.type == "5") {
    openDialogdetail5(item);
  } else if (props.type == "6") {
    openDialogdetail6(item);
  } else if (props.type == "3") {
    openDialogdetail3(item);
  }
}

/** 打开报警记录表单弹窗 详情 */
function openDialogdetail3(roleObj?: any) {
  addDialog3.title = "报警记录详情";
  getInfo3(roleObj.id);
  addDialog3.readvisible = true;
}
const addDialog3 = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo3(id: string) {
  request({
    url: `/iotadmin/scaalarmrecord/getInfoWithData/${id}`,
    // url: `/iotadmin/scaalarmrecord/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog3.data = data.data;
      addDialog3.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

// 打开故障信息详情
function openDialogdetail6(roleObj?: any) {
  addDialog6.title = "设备故障信息详情";
  getInfo6(roleObj.id);
  addDialog6.readvisible = true;
}
const addDialog6 = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo6(id: string) {
  request({
    url: `/pqd-etl/equfaultinfo/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog6.data = data.data;
      addDialog6.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

// 打开测量详情
const addDialog5 = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo5(item: any) {
  request({
    url: `/pqd-etl/qDasDataQuery/get/${item.id}`,
    method: "get",
  })
    .then((data) => {
      addDialog5.data = data.data;
      addDialog5.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开设备故障信息表单弹窗 详情 */
function openDialogdetail5(roleObj?: any) {
  addDialog5.title = "Q-DAS数据详情";
  getInfo5(roleObj);
  addDialog5.readvisible = true;
}

// 打开工单详情
function openWorkOrder(item: any) {
  if (item.id) {
    openDialogdetail4({ id: item.id });
  }
}

const addDialog4 = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo4(id: string) {
  request({
    url: `/dmpDosPcm/psmworkorder/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog4.data = data.data;
      addDialog4.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}
/** 打开工单管理表单弹窗 详情 */
function openDialogdetail4(roleObj?: any) {
  addDialog4.title = "工单管理详情";
  getInfo4(roleObj.id);
  addDialog4.readvisible = true;
}

function changeVisible(value: boolean) {
  addDialog4.visible = value;
  addDialog5.visible = value;
  addDialog6.visible = value;
  addDialog3.visible = value;
  if (!value) {
    addDialog4.data = {};
    addDialog5.data = {};
    addDialog6.data = {};
    addDialog3.data = {};
  }
}

const title = ref("");
const tableData = ref([]);
const tableColumns: any = ref([]);
const api = ref("");
const size = ref("");
const loading = ref(false);
const openColSetting = async () => {
  nextTick(async () => {
    tableData.value = [];
    const current = objectType.value[Number(props.type) - 1];
    title.value = current.name;
    api.value = current.api;
    tableColumns.value = current.data;
    size.value = current.size;
    if (api.value) {
      loading.value = true;
      if (
        props.type == "4" ||
        props.type == "5" ||
        props.type == "6" ||
        props.type == "3"
      ) {
        const res: any = await request({
          url: current.api,
          method: "post",
          data: {
            processEquipCode: props.processEquipCode,
            processEquipId: props.processEquipId,
            equipId: props.equipId ?? "",
            equipCode: props.equipCode,
            alarmTime: props.alarmTime || dayjs().format("YYYY-MM-DD HH:mm:ss"),
            recordCount: props.recordCount || 50,
          },
        }).catch(() => {
          loading.value = false;
        });
        if (res.code === 200 && res.data) {
          // if (props.type == "6") {
          //   tableData.value = [
          //     {
          //       id: "680ed98d661d5635ee76579f",
          //       createTime: "2025-04-28 11:05:49",
          //       lastUpdateTime: "2025-04-28 11:05:49",
          //       createdUserId: "1",
          //       lastUpdatedUserId: "1",
          //       createdUserName: "管理员",
          //       lastUpdatedUserName: "管理员",
          //       beginTimeLocal: "2025-03-20 06:48:15",
          //       faultText:
          //         "AL06 NSA1 Epson无法连接，维修查找原因插拔Epson电脑内存，重新TeachEpson取件放件位置(王)",
          //       faultDuration: 3.7964,
          //       equipId: "1851835937434787841",
          //       equipCode: "AL06",
          //       equipName: "AL06",
          //       positionGroupId: "1916391964845150208",
          //       position: null,
          //       matchingType: 1,
          //       collectTime: "2025-04-28 09:27:40",
          //       enabled: null,
          //       deleted: 0,
          //       ids: null,
          //     },
          //   ];
          // } else {
          tableData.value = res.data || [];
          // }
        }
        loading.value = false;
      } else {
        // 工装耗材接口注释（李哥）
        tableData.value = [];
        // const res: any = await request({
        // url: current.api,
        // method: "get",
        // params: {
        // equipId: props.processEquipId ?? "",
        // equipCode: props.processEquipCode,
        // alarmTime: props.alarmTime || dayjs().format("YYYY-MM-DD HH:mm:ss"),
        // recordCount: props.recordCount || 50,
        // },
        // }).catch(() => {
        // loading.value = false;
        // });
        // if (res.code === 200 && res.data) {
        // tableData.value = res.data || [];
        // }
        loading.value = false;
      }
    } else {
      tableData.value = [];
    }
  });
};

const objectType = ref([
  {
    type: "1",
    name: "工装更换",
    api: "/eam/eammodworkrecord/replace/record",
    size: "620px",
    data: [
      {
        prop: "workTime",
        label: "更换时间",
        isShow: true,
        minWidth: "120",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "更换人",
        isShow: true,
        minWidth: "60",
        align: "center",
      },
      //   {
      //     prop: "mouldCode",
      //     label: "工装编码",
      //     isShow: true,
      //     minWidth: "90",
      //     align: "center",
      //   },
      {
        prop: "materialName",
        label: "工装名称",
        isShow: true,
        minWidth: "110",
        align: "left",
      },
    ],
  },
  {
    type: "2",
    name: "耗材更换",
    api: "/eam/csmworkrecord/replace/record",
    size: "620px",
    data: [
      {
        prop: "upTime",
        label: "更换时间",
        isShow: true,
        minWidth: "120",
        align: "center",
      },
      {
        prop: "createdUserName",
        label: "更换人",
        isShow: true,
        minWidth: "60",
        align: "center",
      },
      //   {
      //     prop: "consumeCode",
      //     label: "耗材编码",
      //     isShow: true,
      //     minWidth: "90",
      //     align: "center",
      //   },
      {
        prop: "materialName",
        label: "耗材名称",
        isShow: true,
        minWidth: "110",
        align: "left",
      },
    ],
  },
  {
    type: "3",
    name: "设备报警",
    api: "/iotadmin/scaalarmrecord/listByEquip",
    size: "550px",
    data: [
      {
        prop: "alarmTime",
        label: "报警时间",
        isShow: true,
        minWidth: "120",
        align: "center",
      },
      {
        prop: "alarmContent",
        label: "报警信息",
        isShow: true,
        minWidth: "180",
        align: "left",
      },
    ],
  },
  {
    type: "4",
    name: "工单记录",
    api: "/dmpDosPcm/psmworkorder/listByEquip",
    size: "650px",
    data: [
      {
        prop: "createTime",
        label: "工单时间",
        isShow: true,
        minWidth: "120",
        align: "center",
      },
      {
        prop: "responsiblePersonName",
        label: "责任人",
        isShow: true,
        minWidth: "70",
        align: "center",
      },
      //   {
      //     prop: "memo",
      //     label: "监控描述",
      //     isShow: true,
      //     minWidth: "90",
      //     align: "left",
      //   },
      {
        prop: "workOrderStatus",
        label: "工单状态",
        isShow: true,
        minWidth: "40",
        align: "center",
        render: (scope: any) => (
          <span>
            {useDictionary("PsmOrderStatus", scope.row.workOrderStatus ?? "")}
          </span>
        ),
      },
    ],
  },
  {
    type: "5",
    name: "测量记录",
    api: "/pqd-etl/qDasDataQuery/listByEquip",
    // api: "",
    size: "700px",
    data: [
      {
        prop: "detectionTime",
        label: "测量时间",
        minWidth: "120",
        isShow: true,
        align: "center",
      },
      {
        prop: "result",
        label: "测量结果",
        minWidth: "60",
        isShow: true,
        align: "center",
        render: (scope: any) =>
          scope.row.result == "1" ? (
            <el-tag>合格</el-tag>
          ) : (
            <el-tag type="danger">不合格</el-tag>
          ),
      },
      {
        prop: "detectionEquipName",
        label: "检具设备",
        minWidth: "100",
        isShow: true,
        align: "center",
      },
      //   {
      //     prop: "partQrCode",
      //     label: "序列号",
      //     minWidth: "60",
      //     isShow: true,
      //     align: "left",
      //   },
      {
        prop: "detectionEvent",
        label: "测量代码",
        minWidth: "60",
        isShow: true,
        align: "center",
      },
    ],
  },
  {
    type: "6",
    name: "故障信息",
    // api: "/eam/efafaultinfo/listByEquip",
    api: "",
    size: "620px",
    data: [
      {
        prop: "beginTimeLocal",
        label: "故障开始时间",
        isShow: true,
        minWidth: "120",
        align: "center",
      },
      {
        prop: "faultText",
        label: "故障信息",
        isShow: true,
        minWidth: "180",
        align: "center",
      },
      {
        prop: "faultDuration",
        label: "故障时间/h",
        isShow: true,
        minWidth: "80",
        align: "right",
      },
    ],
  },
]);

onMounted(() => {
  setTimeout(() => {
    openColSetting();
  }, 0);
});

defineExpose({
  openColSetting,
});
</script>

<style lang="scss">
.colDrawer {
  .el-drawer__header {
    margin-bottom: 0px !important;
  }
  .el-drawer__footer {
    padding-top: 0px;
  }
  .el-divider__text {
    font-weight: bold;
  }
  .el-table--default .cell {
    padding: 0 4px !important;
  }
  .el-table td.el-table__cell div {
    font-size: 13px;
  }
  .el-table .cell {
    font-size: 13px;
  }
  //   .table-empty {
  //     img {
  //       margin-top: 50px;
  //     }
  //     div {
  //       line-height: 20px;
  //       margin-bottom: 60px;
  //     }
  //   }
}

.cursor-move {
  cursor: move;
}

.right-panel-btn {
  z-index: 200;
  position: fixed;
  right: 0;
  top: 200px;
  width: 36px;
  height: 36px;
  color: var(--el-color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--el-color-primary);
  border-radius: 6px 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 20px;
    height: 20px;
    vertical-align: -10px;
  }
}
</style>
